<template>
  <div id="BSNavBar">
    <ul>
        <li v-for="(item,index) in tabBars" @click="switchView(item)">
            {{item.title}}
        </li>
    </ul>
  </div>
</template>
<script>
export default {
    data(){
        return{
            tabBars:[
                {title:'收藏', path:'/BookShelf/Collect',name:'Collect'},
                {title:'下载', path:'/BookShelf/Download',name:'Download'},
                {title:'历史', path:'/BookShelf/historys',name:'historys'}
            ]
        }
    },
    methods:{
        switchView(item){
            //切换路由
            this.$router.push(item.path);
        }
    }
}
</script>
<style lang="scss" scoped>
        #BSNavBar{
        width:100%;
        height:54px;
        color: #00AA00;
        position:fixed;
        border-bottom: 1px solid #DDDDDD;
        top:0;
        font-size: 18px;
        ul{
            width:100%;
            height:100%;
            display:flex;
            flex-direction:row;
            li{
                flex:1;
                display:flex;
                justify-content:center;
                align-items:center;
            }
        }
    }
</style>
